<template>
  <div class="main_box" style="padding:10px;">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{$route.query.id?"修 改 医 检 子 项 目 信 息":"新 增 医 检 子 项 目"}}</h2>
        <el-button
          type="success"
          plain
          size="small"
          icon="fa fa-mail-forward"
          @click="returnList(0)"
        >
          返 回</el-button
        >
      </div>
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="200px"
        :rules="roleRules"
        style="margin: 0;"
      >
        <el-row>
          <el-form-item label="子项目名称" prop="subItemName">
            <el-input
              v-model="dataForm.subItemName"
              clearable
              maxlength="30"
              show-word-limit
            ></el-input>
          </el-form-item>
          <InstitutionSelect
            @institutionId="getInstitutionId"
            :id="dataForm.institutionId"
            :disabled="modifyDisabled"
            :site="1"
          ></InstitutionSelect>
          <el-form-item label="子项目别称" prop="subItemShortName">
            <el-input v-model="dataForm.subItemShortName"></el-input>
          </el-form-item>
          <el-form-item label="子项目编号" prop="subItemCode">
            <el-input v-model="dataForm.subItemCode"></el-input>
          </el-form-item>
          <el-form-item label="关联康来(子)项目" prop="reportSubItemId">
            <el-select
              v-model="dataForm.reportSubItemId"
              filterable
              placeholder="请选择康来子项目"
              :loading="loadingIns"
            >
              <el-option
                v-for="item in pickReportSubItemList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="原价格" prop="subItemPrice">
            <el-input v-model="dataForm.subItemPrice" type="number"></el-input>
          </el-form-item>
          <el-form-item label="合作价格" prop="subItemSalePrice">
            <el-input
              v-model="dataForm.subItemSalePrice"
              type="number"
            ></el-input>
          </el-form-item>
          <el-form-item label="专业分组" prop="subItemGroup">
            <el-input v-model="dataForm.subItemGroup" clearable></el-input>
          </el-form-item>
          <el-form-item label="专业分组编号" prop="subItemGroupCode">
            <el-input v-model="dataForm.subItemGroupCode" clearable></el-input>
          </el-form-item>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark" clearable>
            <el-input
              type="textarea"
              v-model="dataForm.remark"
            ></el-input>
          </el-form-item>
          </el-col>

        </el-row>
        <!-- 表单保存和提交 -->
        <el-row>
          <el-form-item>
            <el-button
              type="primary"
              id="searchButton"
              @click="sureDrugClick"
              >保 存</el-button
            >
            <el-button
             @click="returnList(0)"
              >取 消</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as validators from "@/utils/validators";
import * as message from "@/constants/message";
import InstitutionSelect from "@/components/InstitutionSelect";
import { mapGetters, mapActions } from "vuex";
import InstitutionItemApi from "@/api/institution/institutionItem";
import ReportItemApi from "@/api/report/reportItem";

export default {
  data() {
    return {
      roleRules: {
        subItemName: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur"
          }
        ],
        institutionId: [
          {
            required: true,
            message: "请选择对应医检机构",
            trigger: "change"
          }
        ]
      },
      modifyDisabled: false,
      loadingIns: false,
      dataForm: {
        // 表单数据
        subItemId: "",
        subItemName: "",
        subItemShortName: "",
        subItemCode: "",
        reportSubItemId: "",
        institutionId: "",
        subItemPrice: "",
        subItemGroup: "",
        subItemGroupCode: "",
        subItemSalePrice: "",
        remark:"",
      },
      pickReportSubItemList: [] // 所有的报告单子项目
    };
  },
  components: {
    InstitutionSelect
  },
  mounted() {
    this.init();
    if(this.$route.query.institutionId){
      this.dataForm.institutionId = this.$route.query.institutionId
    }
  },
  created() {
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if (key == 13) {
        document.getElementById("searchButton").click();
      }
    };
  },
  methods: {
    init() {
      this.$Utils.clearData(this.dataForm);
      this.listReportSubItem();
      if (this.$route.query.id) {
        this.dataForm.subItemId = this.$route.query.id;
        this.getData();
        this.modifyDisabled = true;
      }
    },
    sureDrugClick() {
      // 提交
      let _this = this;
      _this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.dataForm.subItemId) {
            //做一个基础的判断，id不为空就编辑，id为空就增加
            this.$confirm(
              message.MSG_CONFIRM_SAVE_ALTER,
              message.TITLE_PROMPT,
              {}
            ).then(() => {
              this.editData();
            });
          } else {
            this.$confirm(
              message.MSG_CONFIRM_SAVE_ADD,
              message.TITLE_PROMPT,
              {}
            ).then(() => {
              this.addData();
            });
          }
        }
      });
    },
    addData() {
      let _this = this; //限制作用域
      let cond = {
        // 表单数据
        subItemName: _this.dataForm.subItemName,
        subItemShortName: _this.dataForm.subItemShortName,
        subItemCode: _this.dataForm.subItemCode,
        reportSubItemId: _this.dataForm.reportSubItemId,
        institutionId: _this.dataForm.institutionId,
        subItemPrice: _this.dataForm.subItemPrice,
        subItemSalePrice: _this.dataForm.subItemSalePrice,
        subItemGroup: _this.dataForm.subItemGroup,
        subItemGroupCode: _this.dataForm.subItemGroupCode,
        remark:_this.dataForm.remark
      };
      InstitutionItemApi.addInstitutionSubItem(cond)
        .then(data => {
          _this.$Utils.notifySuccess();
          _this.returnList(cond);
        })
        .catch(error => {
          if (error.msg) {
            _this.$Utils.notifyError(error.msg);
          }
        });
    },
    editData() {
      // 编辑
      let _this = this;
      let cond = {
        // 表单数据
        subItemId: _this.dataForm.subItemId,
        subItemName: _this.dataForm.subItemName,
        subItemShortName: _this.dataForm.subItemShortName,
        reportSubItemId: _this.dataForm.reportSubItemId,
        institutionId: _this.dataForm.institutionId,
        subItemCode: _this.dataForm.subItemCode,
        subItemPrice: _this.dataForm.subItemPrice,
        subItemGroup: _this.dataForm.subItemGroup,
        subItemGroupCode: _this.dataForm.subItemGroupCode,
        subItemSalePrice: _this.dataForm.subItemSalePrice,
        remark:_this.dataForm.remark
      };
      _this.modifyDisabled = true;
      console.log(cond,246)
      InstitutionItemApi.editInstitutionSubItem(cond)
        .then(data => {
          _this.$Utils.notifySuccess();
          _this.returnList(cond);
        })
        .catch(error => {
          if (error.msg) {
            _this.$Utils.notifyError(message.MSG_ACTION_FAIL);
          }
        });
    },
    getData() {
      // 编辑前，获取数据
      let _this = this;
      InstitutionItemApi.getInstitutionSubItem({
        itemId: this.$route.query.id
      }).then(res => {
        console.log(res.data,263)
        this.$Utils.bindingBean(this.dataForm, res.data);
        // 重新赋值
        if (res.data.subItemPrice) {
          this.dataForm.subItemPrice = parseInt(res.data.subItemPrice);
        }
        if (res.data.subItemSalePrice) {
          this.dataForm.subItemSalePrice = parseInt(res.data.subItemSalePrice);
        }

        if (res.data.reportSubItemId) {
          this.dataForm.reportSubItemId = parseInt(res.data.reportSubItemId);
        }
        // if (res.data.institutionId){
        //   this.dataForm.institutionId = parseInt(res.data.institutionId)
        // }
      });
    },
    listReportSubItem() {
      // 获取报告单子项目列表
      let _this = this;
      _this.loadingIns = true;
      let cond = {};
      ReportItemApi.listReportSubItems(cond)
        .then(res => {
          setTimeout(() => {
            _this.loadingIns = false;
            _this.pickReportSubItemList = res.data.map(item => {
              return {
                value: item.subItemId,
                label: item.subItemName
              };
            });
          }, 200);
        })
        .catch(error => {
          _this.pickReportSubItemList = [];
          console.error(error);
        });
    },
    getInstitutionId(val) {
      // 将组件中的id 附给搜索的按钮
      this.dataForm.institutionId = val;
    },
    returnList(val) {
      if (!val) {
        // _this.$router.go(-1);
        this.$store.dispatch("delView", this.$route);
        this.$router.push({ path: "/item/institutionSubItemManagement" });
      } else {
        this.$store.dispatch("delView", this.$route);
        this.$router.push({
          path: "/item/institutionSubItemManagement",
          query: { id: val.institutionId }
        });
      }
    }
  }
};
</script>

<style lang="scss" src="@/assets/css/views/add.scss" scope></style>
<style scoped>
.add_wrap {
  padding-top: 10px;
  padding-left: 30px;
}
</style>
